<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>省钱控</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script src="../utils/flexible.js"></script>
    <link rel="stylesheet" href="../css/moneyctrl.css">
</head>
<body>
    <header>
        <button>返回</button>
        <p>省钱控-最新优惠</p>
        <img src="../images/header_app.png" alt="">
    </header>
    <!-- 商品列表 -->
    <ul class="ulshop"></ul>


    <!-- 两个按钮和一个计数器 -->
    <div class="center">
        <button class="shang">上一页</button>
        <select name="" id="">
            <option value="1">1/14</option>
            <option value="2/14">2/14</option>
            <option value="3/14">3/14</option>
            <option value="4/14">4/14</option>
            <option value="5/14">5/14</option>
            <option value="6/14">6/14</option>
            <option value="7/14">7/14</option>
            <option value="8/14">8/14</option>
            <option value="9/14">9/14</option>
            <option value="10/14">10/14</option>
            <option value="11/14">11/14</option>
            <option value="12/14">12/14</option>
            <option value="13/14">13/14</option>
            <option value="14/14">14/14</option>
        </select>
        <button class="xia">下一页</button>
    </div>
    <!-- 底部 -->
    <footer>
        <ul>
            <li>登录</li>
            <li>注册</li>
            <li class="returntop">返回顶部</li>
        </ul>
        <p>
            手机APP下载慢慢买手机版-掌上比价平台<br>
            m.manmanbuy.com
        </p>
    </footer>

</body>
</html>

<script>
    // 返回上一级
    let bn=document.querySelector('button');
    bn.addEventListener('click',function(){
        history.go(-1);
    })
    // 商品列表函数
    function render1(data=[]){
        let html="";
        data.forEach(item=>{
            html+=`
                <li productid=${item.productId}>
                    <div>${item.productImg2}</div>
                    <p>${item.productName}
                       <span>${item.productPinkage}</span>
                    <br><br>
                        ${item.productFrom}&nbsp;
                        ${item.productTime}&nbsp;&nbsp; 
                        ${item.productComCount}    
                    </p>
                </li>
                  `
        })
        $('.ulshop').html(html)
    }

    // 获取商品列表
    // 上一页
    $('.shang').on('click',function(){
           console.log(456);
            let pageid=$('select').val();
            let arr=pageid.split("/");
            pageid=arr[0]
            pageid--;
            if(pageid<2)pageid=2
            $('select').val(`${pageid}/14`);
            console.log(pageid);
            // pageid++
        })

    // 下一页
    $('.xia').on('click',function(){
           console.log(456);
            let pageid=$('select').val();
            let arr=pageid.split("/");
            pageid=arr[0]
            pageid++;
            if(pageid>14)pageid=14
            $('select').val(`${pageid}/14`);
            console.log(pageid);
            // pageid++

    })

    // 获取选项框里面的内容 
    $("select").change(function(){
        let pageid=$(this).val();
        let arr=pageid.split("/");
        pageid=arr[0]
        // console.log(pageid);
        // 根据select的改变请求数据

        $.ajax({
        url:'http://chst.vip:1234/api/getmoneyctrl',
        data: {
                pageid
            }
        })
            .then(res=>{
                render1(res.result);
                // 跳转到详情页
                $('.ulshop').on('click','li',function(){
                    let productid = $(this).attr("productid")
                    location.href = `../html/shopdetail.html?productid=${productid}`
                }) 
            })

        });

    // 第一次请求数据，渲染第一页
    $.ajax({
        url:'http://chst.vip:1234/api/getmoneyctrl',
        data: {
                pageid:0
            }
    })
    .then(res=>{
        render1(res.result);
        console.log(res);
        // 跳转到详情页
        $('.ulshop').on('click','li',function(){
            let productid = $(this).attr("productid")
            location.href = `../html/shopdetail.html?productid=${productid}`
        }) 
        
        // 返回顶部
        $('footer .returntop').click(function(e){
            document.documentElement.scrollTop=0;
        })
    })
</script>